<template>
    <div class="song-list">
        <el-table ref="singleTableRef" :data="props.songList" :show-overflow-tooltip="true" @cell-dblclick="cellClick"
            :height="height" highlight-current-row current-row-key="index">
            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
            <el-table-column label="歌曲名">
                <template #default="{ row }">
                    <el-link @click="router.push(`/mv/detail?id=${row.mv}`)" :underline="false" :title='`播放mv`'
                        v-if="row.mv != 0"><i class="iconfont icon-MV111" style="color: #409eff;"></i></el-link>
                    <el-link :underline="false" :title='`此歌曲播放需要vip`' v-if="row.vip"><i class="iconfont icon-huiyuan1"
                            style="color: #409eff;"></i></el-link>
                    <el-link :underline="false" :title="row.name" @click="router.push('/song?id=' + row.id)">{{ row.name
                    }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="歌手" width="150">
                <template #default="{ row }">
                    <span v-for="item, index in row.singer" :key="item.id"><span v-if="index == 0">
                            <el-link @click="router.push('/artist?id=' + item.id)" :underline="false"
                                :title="`歌手：${item.name}`">{{
                                    item.name }}</el-link>
                        </span>
                        <span v-else> / <el-link @click="router.push('/artist?id=' + item.id)" :underline="false"
                                :title="`歌手：${item.name}`">{{ item.name
                                }}</el-link></span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="时长" width="75" align="center">
                <template #default="{ row }">
                    <span>{{ row.duration }}</span>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" width="60" align="center">
                <template #default="{ row }">
                    <i class="iconfont icon-del sjk" :title="`删除歌曲 ${row.name}`" @click="delSong(row)"></i>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import { usePlayList, usePlayIndex } from '@/stores/playlist';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';



const router = useRouter()
const props = defineProps({
    songList: {
        type: Array,
        default: () => []
    },
    typeSize: {
        type: String,
        default: ''
    },
    isScroll: {
        type: Boolean,
        default: false
    },
    height: {
        type: Number
    }
})
const singleTableRef = ref(null)
const playList = usePlayList()
const playIndex = usePlayIndex()


const cellClick = (row, column, event) => {
    playList.playlist.find((item, index) => {
        if (item.id == row.id) {
            playIndex.playIndex = index
            return
        }
    })
}
onMounted(async () => {

    setTimeout(() => {
        scrollToRow(singleTableRef.value, playIndex.playIndex)
    }, 0)
})

const delSong = (row) => {
    ElMessage.success(`删除歌曲 ${row.name} 成功`)
    playList.playlist = playList.playlist.filter(item => item.id != row.id)
}


/**
 *  el-table滚动到表格某一行
 *  @param {object} tableElement  表格元素(el-table的ref)
 *  @param {Number} rowIndex   滚动到第几行(从0开始)
 */
const scrollToRow = (tableElement, rowIndex) => {
    //高亮当前行
    tableElement.setCurrentRow(playList.playlist[rowIndex])
    if (rowIndex == 0) {
        singleTableRef.value.scrollTo({ top: 0 })
        return
    }
    const top = tableElement.$el.querySelectorAll(`.el-table__row`)[rowIndex].offsetTop
    top && singleTableRef.value.scrollTo({ top: top })
}

//监听播放列表长度的变化和当前index的变化，如果变化了，就滚动到当前播放的歌曲
watch([() => playList.playlist.length, () => playIndex.playIndex], (newVal, oldVal) => {
    //如果playList.playlist.length变成0，就不滚动
    if (newVal[0] == 0) return
    //如果长度发生变化，就滚动到当前播放的歌曲或者当前播放的歌曲发生变化，就滚动到当前播放的歌曲
    if (newVal[0] != oldVal[0] || newVal[1] != oldVal[1]) {
        scrollToRow(singleTableRef.value, playIndex.playIndex)
    }
})

</script>

<style lang="less" scoped>
.sjk {
    &:hover {
        color: red;
    }

    &:active {
        color: black;
    }
}
</style>